<template>
  <div class="funcgroup1">
    <!-- <div class="title">按名称检索</div>
    <span class="label">方剂名/组方名称：</span><input v-model="content1" @keyup.enter="search" placeholder="输入方剂名或组方名称"
      type="text">
    <button @click="search">检索</button> -->

    <div class="search-section">
      <div class="search-box">
        <input v-model="content1" @keyup.enter="search" type="text" class="search-input" placeholder="输入方剂名或组方名称">
        <button @click="search" class="search-button">检索</button>
      </div>
    </div>
    <div v-show="isLoading && !isShow" class="loadWindow"
      style="position:absolute;top: 0;z-index: 2;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.377);">
      <img style="width: 10vw;height: 10vw;left: 45vw;top: 40vh;" src="../assets/img/loading.gif"></div>
    <!-- <div class="jqAnimation" style="display: block; background-color:aqua; width: 1000px;height: 500px;"></div> -->

    <div v-show="isShow" class="funcgroup1" style="width: 100%;">
      <div class="title">{{ content }}</div>
      <div style="display: flex;flex-direction: row;">
        <div>
          <div class="label1">功效</div>
          <h3 style="margin-left: 25px;">གཉན་ནད། ཚད་པ། རླུང་ནད། རི་ཐང་མཚམས། གློ་སྐམ། ཐེས་སྲུད། གྲུམ་བུ། བར་རྟ། སྙིང་ཚད།
            སྟོད་འཚངས།
          </h3>
          <div class="label1">药品信息</div>
          <div style="margin-left: 100px;">
            <!-- <span style="display: block;width: 700px;"><a @click="switchChart(1)">直方图</a><a
              @click="switchChart(2)">曲线图</a><a @click="switchChart(3)">饼图</a><a @click="switchChart(4)">雷达图</a><a
              @click="switchChart(5)">词云图</a><a @click="switchChart(6)">散点图</a><a @click="switchChart(7)">--7--</a><a
              @click="switchChart(8)">--8--</a></span> -->


            <v-chart v-show="isFangji" style="float: left;width:500px ;height: 400px;" :option="option1" />
            <v-chart v-show="isFangji" style="float: left;width: 500px;height: 400px;" :option="option2" />
            <v-chart v-show="isFangji" style="float: left;width: 600px;height: 400px;" :option="option3" />
            <v-chart v-show="isFangji" style="float: left;width: 500px;height: 500px;" :option="option4" />
            <v-chart v-show="isFangji" style="float: left;width: 500px;height: 500px;" :option="option5" />
            <v-chart v-show="isFangji" style="float: left;width: 500px;height: 500px;" :option="option6" />
            <v-chart v-show="isZufang" style="float: left;width: 500px;height: 500px;" :option="option7" />
            <v-chart v-show="isZufang" style="float: left;width: 500px;height: 500px;" :option="option8" />
            <!-- <v-chart v-show="chart === 1" style="float: left;width: 500px;height: 500px;" :option="option8" /> -->
            <!-- <v-chart v-show="chart === 5" style="width: 700px;height: 400px;" :option="option5" />
          <v-chart v-show="chart === 6" style="width: 700px;height: 400px;" :option="option6" />
          <v-chart v-show="chart === 7" style="width: 700px;height: 400px;" :option="option7" />
          <v-chart v-show="chart === 8" style="width: 700px;height: 400px;" :option="option8" /> -->
          </div>
        </div>
        <div style="background-color: #cecece;padding-right: 100px;">
          <div class="label1">包含的组方</div>
          <!-- 【这两块计划获取数据后用v-for渲染一列链接，点击链接自动检索】 -->
          <button v-show="isFangji" class="listButton" v-for="btn in medicine" :key="'med-' + btn.id"
            @click="handleButtonClick(btn.name)" style="">
            {{ btn.name }}
          </button>
          <div v-show="!isFangji" style="margin-left: 10px;">不包含任何组方</div>
          <div class="label1">归属于方剂</div>
          <button v-show="isZufang" class="listButton" v-for="btn in medicineMaterial" :key="'mat-' + btn.id"
            @click="handleButtonClick(btn.name)" style="">
            {{ btn.name }}
          </button>
          <div v-show="!isZufang" style="margin-left: 10px;">不属于任何方剂</div>
        </div>

      </div>


    </div>
    <div v-show="!isShow" class="funcgroup1">
      <div style="height: 20vw;">


        <!-- <img style="margin-left: 10vw;" src="../assets/img/searchEmp.png" /> -->




      </div>

      <div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="/portal-ui/jquery.js"></script>
<script type="text/javascript" src="/portal-ui/jparticle.min.js"></script>
<script type="text/javascript">
        $(function(){
            $(".jqAnimation").jParticle({
                background: "rgba(0,0,1,0)",//背景颜色
                color: "#fff",//粒子和连线的颜色
                particlesNumber:200,//粒子数量
                //disableLinks:true,//禁止粒子间连线
                //disableMouse:true,//禁止粒子间连线(鼠标)
                particle: {
                    minSize: 1,//最小粒子
                    maxSize: 3,//最大粒子
                    speed: 60,//粒子的动画速度
                }
            });
        });
    </script>
<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GridComponent, TooltipComponent, TitleComponent } from 'echarts/components';
import { BarChart, LineChart, PieChart, ScatterChart, RadarChart, MapChart, GraphChart, GaugeChart } from 'echarts/charts';
import VChart from 'vue-echarts';
use([
  CanvasRenderer,
  BarChart, LineChart, PieChart, ScatterChart,
  RadarChart, MapChart, GraphChart, GaugeChart,
  GridComponent, TooltipComponent, TitleComponent
]);
export default {
  components: { VChart },
  data() {
    return {
      isFangji: false,//（细节）可以在这变量上考虑异步加载处理
      isZufang: false,
      content: '',
      content1: '',
      chart: 1,
      isShow: false,
      isLoading:false,
      isError:false,
      medicine: [
        { id: 1, name: '此组方不是方剂' },

      ],
      medicineMaterial: [
        { id: 1, name: '此方剂不是组方' },

      ],
      medData: {
        categories: [],
        dosage: [],
        tasteWeights: [],
        g:1.0,
        n:1.0,
        //stocks: [320, 280, 150, 420, 380],
        // regions: [
        //   { name: '华北', value: 235 },
        //   { name: '华东', value: 310 },
        //   { name: '华南', value: 180 },
        //   { name: '西部', value: 135 }
        // ]
      },
      // 所有图表配置都放在这里
      option1: {
        title: { text: '方剂组方组成' },
        xAxis: { name: '组方', data: [] }, // 初始为空，会在created中设置
        yAxis: { name: '剂量' },
        series: [{
          type: 'bar',
          data: [],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true }
        }]
      },
      option2: {
        title: { text: '方剂组方组成' },
        xAxis: { name: '组方' },
        yAxis: { name: '剂量' },
        series: [{
          type: 'line',
          data: [],
          smooth: true,
          lineStyle: { width: 3 },
          areaStyle: { color: 'rgba(55, 162, 255, 0.2)' }
        }]
      },
      option3: {
        title: { text: '方剂组方组成占比' },
        series: [{
          type: 'pie',
          radius: ['50%', '90%'],
          data: [
            { name: '甘味', value: 35 },
            { name: '酸味', value: 25 },


          ],
          label: { formatter: '{b}: {d}%' },
          roseType: 'radius'
        }]
      },


      option4: {
        title: {
          text: '方剂成分',
          //subtext: '多维能力对比'
        },
        tooltip: {}, // 提示框
        legend: {
          data: [] // 图例
        },
        radar: {
          // 雷达图的指示器（维度）
          indicator: [
            { name: '编程能力' },

          ],
          shape: 'polygon', // 雷达图形状（可选：'polygon'多边形或'circle'圆形）
          splitNumber: 5,    // 分割段数（同心圆数量）
          axisName: {
            color: '#333' // 维度名称颜色
          }
        },
        series: [{
          name: '员工对比',
          type: 'radar',
          data: [
            {
              value: [],
              name: '张三',
              areaStyle: { color: 'rgba(84, 112, 198, 0.5)' } // 填充颜色
            },
          ]
        }]
      },

      option5: {
        title: { text: '（多）组方六味占比' },
        series: [{
          type: 'pie',
          radius: ['50%', '80%'],
          data: [
            { name: '甘味', value: 35 },
            { name: '酸味', value: 25 },


          ],
          label: { formatter: '{b}: {d}%' },
          roseType: 'radius'
        }]
      },
      option6: {
        title: { text: '（多）组方味道克数' },
        xAxis: { name: '组方', data: [] }, // 初始为空，会在created中设置
        yAxis: { name: '剂量' },
        series: [{
          type: 'bar',
          data: [],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true }
        }]
      },
      option7: {
        title: {
          text: '组方味道权重',
          //subtext: '多维能力对比'
        },
        tooltip: {}, // 提示框
        legend: {
          data: [] // 图例
        },
        radar: {
          // 雷达图的指示器（维度）
          indicator: [
            { name: '甜མངར།' ,max:7},
            { name: '酸སྐྱུར།' ,max:7},
            { name: '咸ལན་ཚ།' ,max:7},
            { name: '苦ཁ།',max:7},
            { name: '辛ཚ།' ,max:7},
            { name: '涩བསྐ།' ,max:7},
          ],
          shape: 'polygon', // 雷达图形状（可选：'polygon'多边形或'circle'圆形）
          splitNumber: 5,    // 分割段数（同心圆数量）
          axisName: {
            color: '#333' // 维度名称颜色
          }
        },
        series: [{
        name: '组方味道权重',
          type: 'radar',
          data: [
            {
              value: [1,1,1,1,1,1],
              
              areaStyle: { color: 'rgba(84, 112, 198, 0.5)' } // 填充颜色
            },
            
          ]
        }]
      },
            option8: {
        title: { text: '组方六味占比' },
        series: [{
          type: 'pie',
          radius: ['50%', '80%'],
          data: [
           { name: '甜མངར།' ,value:1},
           { name: '酸སྐྱུར།' ,value:1},
          { name: '咸ལན་ཚ།',value:1},
            { name: '苦ཁ།' ,value:1},
            { name: '辛ཚ།' ,value:1},
            { name: '涩བསྐ།' ,value:1},
          ],
          label: { formatter: '{b}: {d}%' },
          roseType: 'radius'
        }]
      },
    }
  },

/*

      this.option4.radar.indicator = this.medData.categories.map(name => ({ name }));
      this.option4.series[0].data = [{
        value: this.medData.dosage,
        name: '成分含量',
        areaStyle: { color: 'rgba(84, 112, 198, 0.5)' }
      }];


*/


  created() {
    // 初始化图表数据
    this.updateChartOptions();
  },
  methods: {
    handleButtonClick(name) {
      this.content = name;
      this.content1 = name;
      this.search();
    },
    async search() {//点击检索按钮后触发
      // if (this.content1) {
      //   this.isShow = true;
      //   this.content = this.content1;
      if(!this.content1){
        this.isShow=false;
        this.isLoading=false;
        this.isError=false;
        return;
      }
        try {
          this.isShow=false;
          this.isError=false;
this.isLoading=true;
          const [response, response2] = await Promise.all([
            this.getRequest('/getByName/', { name: this.content1 }),
            this.getRequest('/getByIngredient/', { ingredientName: this.content1 }),  
          ]);
          this.isShow=true;
          //console.log(response2.data);
          if (response.data.code === 200) {
            this.medData.categories = response.data.data.ingredients.map(item => item.ingredientName);
            // this.medicineMaterial.name = response.data.data.ingredients.map(item => item.ingredientName);
            
            this.medData.dosage = response.data.data.ingredients.map(item => item.dosage);
            this.medicine = response.data.data.ingredients.map((item, index) => ({
              id: index + 1, // 保持原有ID或使用新的ID逻辑
              name: item.ingredientName // 使用接收到的名称
            }));

            this.isFangji = true;
          } else {
            this.isFangji = false;
          }
          if (response2.data.code === 200) {
           // const response3=this.getRequest('/getTasteName/', { TasteName: this.content1 }),
           const response3 = await this.getRequest('/getWeight/', {Zufang: this.content1});
           const response4=(await this.getRequest('/getTotallyWeight/', {Zufang: this.content1})).data.data;
           this.medData.g = response4.totalWeight;
           this.medData.n = response4.jiliang;

//this.medData.g=response3.data.data;//这边换上G
for(let i=0;i<6;i++){

this.medData.tasteWeights[response3.data.data[i].value]=response3.data.data[i].result;

}
for(let i=0;i<6;i++){

if(this.medData.tasteWeights[i]){
continue;
} else{
  this.medData.tasteWeights[i]=1;
}

}
           
          //  this.medData.tasteWeights[1]=response3.data.data.tasteId2;
          //  this.medData.tasteWeights[2]=response3.data.data.tasteId3;
          //  this.medData.tasteWeights[3]=response3.data.data.tasteId4;
          //  this.medData.tasteWeights[4]=response3.data.data.tasteId5;
          //  this.medData.tasteWeights[5]=response3.data.data.tasteId6;
            this.medicineMaterial = response2.data.data.map((item, index) => ({
              id: index + 1, // 保持原有ID或使用新的ID逻辑
              name: item.formulaName // 使用接收到的名称
            }));

            console.log(response2.data.data[0].formulaName);
            this.isZufang = true;
          } else {
            this.isZufang = false;
          }

         this.updateChartOptions(); // 更新图表数据
        } catch (error) {
          this.isLoading=false;
          this.isError=true;
          this.isShow=false;
          console.error('请求失败:', error);
        }

    },
    switchChart(n) {
      this.chart = n;
    },
    clear() {
      console.log("12");
      //this.medData = ""
      this.content = ""
      this.content1 = ""
      this.search();
      //this.updateChartOptions();
    },
    updateChartOptions() {
      // 更新所有图表的数据引用


      this.option1.xAxis.data = this.medData.categories;
      this.option1.series[0].data = this.medData.dosage;
      this.option2.xAxis.data = this.medData.categories;
      this.option2.series[0].data = this.medData.dosage;
      this.option3.series[0].data = this.medData.categories.map((name, index) => ({
        name: name,                  // 当前 categories 的元素
        value: this.medData.dosage[index] // 对应 dosage 的元素
      }));
for(let i=0;i<6;i++){
  this.option8.series[0].data[i].value=this.medData.tasteWeights[i]/this.medData.g*this.medData.n;
}


      this.option4.radar.indicator = this.medData.categories.map(name => ({ name }));
      this.option4.series[0].data = [{
        value: this.medData.dosage,
        // name: '成分含量',
        areaStyle: { color: 'rgba(84, 112, 198, 0.5)' }
      }];
this.option7.series[0].data = [{
        value: this.medData.tasteWeights,
                areaStyle: { color: 'rgba(84, 112, 198, 0.5)' }
      }];
      // this.option4.series[0].data.value= this.medData.dosage;
    }
  }
};
</script>

<style>
.title {
  text-indent: 20px;
  font-size: 32px;
  font-weight: 800;
  padding: 20px 0 20px 0;
}

.listButton {
  background-color: #006308;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 24px;
  margin-top: -5px;
  width: 100px;
  height: 40px;
  vertical-align: middle;
  border: none;
  font-size: large;
  transition: 0.4s ease;
  vertical-align: middle;
}

.listButton:hover {
  background-color: #fff;
  color: #006308;
  font-size: 24px;
  width: 110px;
  /* height: 45px; */
  /* margin: 0 7px 0 7px; */
  margin-left: 23px;
  margin-right: 14px;
  /* margin-top: -7px; */
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.377);
}

input {
  font-size: 20px;
  transition: 0.3s;
  height: 36px;
  border: none;
  border-radius: 3px;
  width: 300px;
  line-height: 36px;
  text-indent: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

/* input:focus {
  outline: solid 3px #006308;
  font-size: 24px;
} */

/* input:hover {
  outline: solid 3px #006308;
  font-size: 24px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
} */

.label {
  margin-left: 24px;
  font-size: 24px;
}

.label1 {
  margin: 20px 0 20px 10px;
  font-size: 27px;
  border-left: solid 9px #006308;
  text-indent: 5px;
  line-height: 35px;
  width: 200px;
}

span a {
  padding: 0 10px 0 10px;
  font-size: 20px;
  line-height: 30px;
  border-right: solid 1px #006308;

  transition: 0.3s;
  cursor: pointer;
}

span a:hover {
  background-color: #006308;
  color: white;
  font-size: 24px;
  border-left: solid 7px white;
  border-right: solid 7px white;
  line-height: 24px;
  margin-left: -10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.388);
  border-radius: 5px;
}

span {
  margin: auto 10px auto 10px;
}

.funcgroup1 {
  background-color: #ffffff;
  margin-bottom: 20px;
  min-height: 60vh;
  /* display: block;
  position: relative; */
}

.listButton {

  width: 100%;
  margin-bottom: 10px;
  line-height: 25px;
}

.listButton:hover {
  width: 105%;

  line-height: 25px;
  margin-bottom: 10px;
  border-left: solid 9px #006308;
}

.search-section {
  /* position: absolute; */
  bottom: 80px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 5;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 30px;
  overflow: hidden;
  width: 80%;
  max-width: 800px;
  margin-top: 10vh;
  height: 50px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.search-input {
  flex: 1;
  padding: 0 20px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 20px;
}

.search-input:hover {

  font-size: 24px;
}

.search-input:focus {

  font-size: 24px;
}

.search-button {
  width: 90px;
  height: 50px;
  line-height: 50px;
  background-color: #4285f4;
  border: none;
  color: white;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;

}

.search-button:hover {

  font-size: 26px;
  background-color: rgb(220, 228, 255);

  color: #4285f4;

}
</style>